<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="w65 ma p05 pt2">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
					<el-row>
						<el-col :span="8">
							<el-form-item label="服务名称" prop="name">
								<el-input style="width: 16rem;" clearable placeholder="请输入服务名称" v-model="ruleForm.name"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="服务描述" prop="Service_description">
								<el-input style="width: 16rem;" clearable placeholder="请输入服务描述" v-model="ruleForm.Service_description"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="服务类型" prop="Service_type">
								<el-input style="width: 16rem;" clearable placeholder="请输入服务类型" v-model="ruleForm.Service_type"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="坐标系" prop="Coordinate_system">
								<el-input style="width: 16rem;" clearable placeholder="请输入坐标系" v-model="ruleForm.Coordinate_system"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="投影类型" prop="Projection_type">
								<el-input style="width: 16rem;" clearable placeholder="请输入投影类型" v-model="ruleForm.Projection_type"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="服务地址" prop="Service_address">
								<el-input style="width: 16rem;" clearable placeholder="请输入服务地址" v-model="ruleForm.Service_address"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="服务日期" prop="Service_date">
								<el-date-picker style="width: 16rem;" v-model="ruleForm.Service_date" type="date" placeholder="选择服务日期"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="西边经度" prop="West_longitude">
								<el-input style="width: 16rem;" clearable placeholder="请输入西边经度" v-model="ruleForm.West_longitude"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="东边经度" prop="East_longitude">
								<el-input style="width: 16rem;" clearable placeholder="请输入东边经度" v-model="ruleForm.East_longitude"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="北边纬度" prop="North_latitude">
								<el-input style="width: 16rem;" clearable placeholder="请输入北边纬度" v-model="ruleForm.North_latitude"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="南边纬度" prop="South_latitude">
								<el-input style="width: 16rem;" clearable placeholder="请输入南边纬度" v-model="ruleForm.South_latitude"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="类型" prop="type">
								<el-select style="width: 16rem;" clearable v-model="ruleForm.type" placeholder="请选择类型">
									<el-option v-for="item in optionsDrillType" :key="item.drill_type" :label="item.label" :value="item.drill_type"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="备注" prop="remark">
								<el-input clearable style="width: 16rem;" placeholder="请输入备注" v-model="ruleForm.remark"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="审批人" prop="s_id">
								<el-select style="width: 16rem;" clearable v-model="ruleForm.s_id" placeholder="请选择审批人">
									<el-option v-for="item in optionsName" :key="item.id" :label="item.username" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" :offset="8">
							<el-form-item>
								<el-button class="btnSubmit" type="primary" :loading="loading" @click="submitForm('ruleForm')">
									<span v-if="!loading">提交审核</span>
									<span v-else>提交审核中...</span>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { getItem } from '@/utils/storage.js';
import { approval, addIiiustratedBooks } from '@/api/drill.js';
export default {
	name: '',
	components: {
		breadcrumb
	},
	data() {
		return {
			loading: false,
			ruleForm: {
				token: getItem('token'),
				del_id: ''
			},
			optionsName: [],
			rules: {
				s_id: [{ required: true, message: '请选择审核批人', trigger: 'change' }]
			},
			optionsDrillType: [
				{
					label: '城市地质',
					drill_type: 1
				},
				{
					label: '地热资源',
					drill_type: 2
				},
				{
					label: '区域海洋',
					drill_type: 3
				}
			]
		};
	},
	created() {
		let data = {
			token: getItem('token')
		};
		approval(data).then(res => {
			console.log(res);
			this.optionsName = res.data;
		});
		if (this.$route.query.updateVal == '1') {
			console.log(this.$route.query.val);
			let getData = this.$route.query.val;
			this.ruleForm = {
				type: parseInt(getData.type),
				token: getItem('token'),
				del_id: getData.id,
				name: getData.name,
				Service_type: getData.Service_type,
				Service_description: getData.Service_description,
				Coordinate_system: getData.Coordinate_system,
				Projection_type: getData.Projection_type,
				Service_address: getData.Service_address,
				Service_date: getData.Service_date,
				West_longitude: getData.West_longitude,
				East_longitude: getData.East_longitude,
				North_latitude: getData.North_latitude,
				South_latitude: getData.South_latitude,
				remark: getData.remark,
				// s_id: getData.s_id,
			};
		}
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true;
					addIiiustratedBooks(this.ruleForm).then(() => {
						this.loading = false;
						this.msgSuccess('提交成功,等待审核');
						this.$router.go(-1);
						this.ruleForm.del_id = '';
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.conent-top {
	background-color: #ffffff;
	height: 39.5rem;
}
.btnSubmit {
	background-color: #2f6bbb;
	margin-top: 10rem;
}
</style>
